<template>
  <div class="orderTongji">
    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>订单统计</span>
      </div>
      <!-- -------------------------------------------------------------- -->

      <!-- two 搜索框-->
      <div class="search">
        <el-input
          placeholder="下单人"
          v-model="search"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>

        <!-- ----------------------------------------------------------- -->

        <!-- three----------日期 -->
        <el-date-picker
          v-model="data"
          type="daterange"
          range-separator="至"
          start-placeholder="下单开始日期"
          end-placeholder="下单结束日期"
        >
        </el-date-picker>
      </div>
      <!-- 图表 -->
      <!-- <div id="myChart" :style="{width: '300px', height: '300px'}"></div> -->
      <div ref="echarts" style="width：100% ;height:400px"></div>
    </el-card>
  </div>
</template>

<script>
import { getTongji } from "@/api";
export default {
  created() {
    this.initData();
  },
  data() {
    return {
      search: "",
      data: "",
      titleArr: [], //存放月份
      titleDataArr: [] //存放月份所对应的数据
    };
  },

  methods: {
    //封装异步请求
    initData() {
      //发送异步请求
      getTongji().then(res => {
        // console.log(res)
        this.titlrArr = res.data.title;
        this.titleDataArr = res.data.data;
        this.drawLine();
      });
    },
    mounted() {
      //用来初始化echarts实例
      this.drawLine();
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myChart = this.$echarts.init(this.$refs.echarts);

      // 绘制图表的配置项和数据
      let option = {
        title: { text: "在Vue中使用echarts" },
        //tooltip提示框取默认值，即鼠标移动到柱状图会显示内容
        tooltip: {
          trigger: "axis", //触发类型，轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示显示相应数据
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效
            type: "shadow" //提示框类型，磨人是line直线，cross十字准星，shadow阴影
          }
        },
        legend: {
          data: [] //图例文字列表
        },
        xAxis: {
          data: this.titlrArr //配置x轴的内容
        },
        yAxis: {}, //y轴内容
        series: [
          {
            //一种系列
            name: "销量",
            type: "bar",
            label: {
              //坐标轴指示器的文本标签是否显示
              show: true
            },
            // data: [5, 20, 36, 10, 10, 20]
            data: this.titleDataArr //x轴中每一列上的一个系列的数据，如果还有第二个系列，就写两个data就可以了
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.orderTongji {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  //搜索
  .search {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .input-with-select {
    width: 300px;
  }
  .el-table .cell {
    display: flex;
  }
}
</style>
